<template>
  <div class="BMap-address-select">
    <div v-if="$attrs.disabled"></div>
    <el-input
      v-else
      :value="completeAddress"
      :placeholder="$attrs.placeholder"
      :size="$attrs.size"
    >
      <template
        v-if="!$attrs.disabled"
        slot="append"
      >
        <div @click="openDialog">选择</div>
      </template>
    </el-input>
    <el-dialog
      title="地址选择"
      :visible.sync="openMap"
      width="900px"
      append-to-body
    >
      <el-form label-width="80px">
        <el-row>
          <el-col :span="10">
            <el-form-item label="搜索地址">
              <el-input
                id="searchAddres"
                v-model="searchAddresKeywords"
                size="mini"
                type="text"
                placeholder="请输入地点"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="14">
            <el-form-item label="当前地址">
              <el-input
                v-model="addressInfo.address"
                placeholder="请输入内容"
              >
                <template slot="prepend">
                  {{ addressInfo.province }}{{ addressInfo.city
                  }}{{ addressInfo.district }}
                </template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div
        id="baidu-map-container"
        style="width: 100%; height: 400px"
      ></div>

      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          type="primary"
          @click="confirmSelect"
        >
          确 定
        </el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { deepClone } from '@/util';
export default {
  name: 'BMapAddressSelect',
  props: {
    // eslint-disable-next-line vue/require-prop-types
    value: {
      // type: String || Object,
      default: () => {
        return {
          // 地址信息
          longitude: '', // 经度
          latitude: '', // 纬度
          province: '', // 省
          city: '', // 市
          district: '', // 区
          address: '', // 详细地址
        };
      },
    },
  },
  data() {
    return {
      searchAddresKeywords: '',
      addressInfo: {
        // 地址信息
        longitude: '', // 经度
        latitude: '', // 纬度
        province: '', // 省
        city: '', // 市
        district: '', // 区
        address: '', // 详细地址
      },
      openMap: false,
    };
  },
  computed: {
    completeAddress() {
      const { province, district, address } = this.value;
      let city = this.value.city;
      if (province === city) {
        city = '';
      }
      return `${province || ''}${city || ''}${district || ''}${address || ''}`;
    },
  },
  methods: {
    // 初始化百度地图
    initBaiduMap() {
      const that = this;
      this.$nextTick(function () {
        /** 初始化地图Start */
        var map = new window.BMap.Map('baidu-map-container'); // 创建地图实例
        var point = new window.BMap.Point(116.404, 39.915); // 设置中心点坐标
        map.centerAndZoom(point, 13); // 地图初始化，同时设置地图展示级别
        map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
        /** 初始化地图End */

        /** 点击地图创建坐标事件Start */
        // 添加地图点击事件
        map.addEventListener('click', function (e) {
          var clickpt = e.point; // 点击的坐标
          map.clearOverlays(); // 移除地图上的标注
          var marker = new window.BMap.Marker(clickpt); // 创建标注
          map.addOverlay(marker); // 将标注添加到地图中
          // 逆地址解析
          that.geocAddress(clickpt);
        });
        /** 点击地图创建坐标事件End */

        /** 搜索地址Start */
        // 建立一个自动完成的对象
        var ac = new window.BMap.Autocomplete({
          input: 'searchAddres',
          location: map,
        });
        // 鼠标点击下拉列表后的事件
        ac.addEventListener('onconfirm', function (e) {
          map.clearOverlays(); // 移除地图上的标注
          var local = new window.BMap.LocalSearch(map, {
            //智能搜索
            onSearchComplete: function (results) {
              const poi = results.getPoi(0); //获取第一个智能搜索的结果
              var searchpt = poi.point; // 获取坐标
              map.centerAndZoom(searchpt, 16);
              map.addOverlay(new window.BMap.Marker(searchpt)); //添加标注
              that.geocAddress(searchpt); // 逆地址解析
            },
          });
          // 搜索词
          var searchValue = e.item.value;
          local.search(
            searchValue.province +
              searchValue.city +
              searchValue.district +
              searchValue.street +
              searchValue.business
          );
        });
        /** 搜索地址End */
      });
    },

    /** 逆向解析地址 point */
    geocAddress(point) {
      const that = this;
      var geoc = new window.BMap.Geocoder();
      geoc.getLocation(point, function (geocInfo) {
        // 设置基本信息
        var addressInfo = geocInfo.addressComponents;
        that.addressInfo.longitude = point.lng;
        that.addressInfo.latitude = point.lat;
        that.addressInfo.province = addressInfo.province; // 省
        that.addressInfo.city = addressInfo.city; // 市
        that.addressInfo.district = addressInfo.district; // 区
        let address = addressInfo.street + addressInfo.streetNumber;
        if (geocInfo.surroundingPois.length > 0) {
          address = address + geocInfo.surroundingPois[0].title;
        }
        that.addressInfo.address = address;
      });
    },

    /** 打开地图选择 */
    openDialog() {
      this.openMap = true;
      this.addressInfo = deepClone(this.value) || {
        // 地址信息
        longitude: '', // 经度
        latitude: '', // 纬度
        province: '', // 省
        city: '', // 市
        district: '', // 区
        address: '', // 详细地址
      };
      this.initBaiduMap();
    },

    /**
     * 确认选择
     */
    confirmSelect() {
      this.$emit('input', this.addressInfo);
      this.openMap = false;
    },

    /**
     * 取消选择
     */
    cancel() {
      this.openMap = false;
    },
  },
};
</script>

<style lang="scss">
// 防止地图自动完成的对象被遮挡
.tangram-suggestion {
  z-index: 9999;
}
.BMap-address-select {
  .el-input-group__append {
    cursor: pointer;
    padding: 0;
    > div {
      padding: 0 20px;
    }
  }
}
</style>
